<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>Example: Application Menubar (YUI Library)</title>

        <!-- Standard reset and fonts -->

        <link rel="stylesheet" type="text/css" href="../../build/reset/reset.css">
        <link rel="stylesheet" type="text/css" href="../../build/fonts/fonts.css">
        <link rel="stylesheet" type="text/css" href="../../build/container/assets/skins/sam/container.css">


        <!-- CSS for Menu -->

        <link rel="stylesheet" type="text/css" href="../../build/menu/assets/skins/sam/menu.css"> 


        <!-- Page-specific styles -->

        <style type="text/css">

            body {
            
                background-color: #dfb8df;
            
            }
            
            em#yahoolabel {

                text-indent: -6em;
                display: block;
                background: url(http://us.i1.yimg.com/us.yimg.com/i/us/nt/b/purpley.1.0.gif) center center no-repeat;
                width: 2em;
                overflow: hidden;

            }
        
        </style>


        <!-- Dependency source files -->

        <script type="text/javascript" src="../../build/utilities/utilities.js"></script>
        <script type="text/javascript" src="../../build/container/container.js"></script>


        <!-- Menu source file -->

        <script type="text/javascript" src="../../build/menu/menu.js"></script>


        <!-- Page-specific script -->

        <script type="text/javascript">

            YAHOO.example.onDOMReady = function(p_sType) {

                var aItemData = [

                    { text: "<em id=\"yahoolabel\">Yahoo!</em>", submenu: { id: "yahoo", itemdata: [
                            
                            "About Yahoo!",
                            "YUI Team Info",
                            "Preferences"
                            
                        ] }
                        
                    },

                    { text: "File", submenu: {  id: "filemenu", itemdata: [

                            { text: "New File", helptext: "Ctrl + N" },
                            "New Folder",
                            { text: "Open", helptext: "Ctrl + O" },
                            { text: "Open With...", submenu: { id: "applications", itemdata: [
                                    "Application 1", 
                                    "Application 2", 
                                    "Application 3", 
                                    "Application 4"
                                ] } 
                            },
                            { text: "Print", helptext: "Ctrl + P" }

                        ] }
                    
                    },
                    
                    { text: "Edit", submenu: { id: "editmenu", itemdata: [

                            [ 
                                { text: "Undo", helptext: "Ctrl + Z" },
                                { text: "Redo", helptext: "Ctrl + Y", disabled: true }
                            ],
                            
                            [
                                { text: "Cut", helptext: "Ctrl + X", disabled: true },
                                { text: "Copy", helptext: "Ctrl + C", disabled: true },
                                { text: "Paste", helptext: "Ctrl + V" },
                                { text: "Delete", helptext: "Del", disabled: true }
                            ],
                            
                            [ { text: "Select All", helptext: "Ctrl + A" } ],

                            [
                                { text: "Find", helptext: "Ctrl + F" },
                                { text: "Find Again", helptext: "Ctrl + G" }
                            ]
                    
                        ] }

                    },

                    "View",

                    "Favorites",

                    "Tools",

                    "Help"
                ];


                var oMenuBar = new YAHOO.widget.MenuBar("mymenubar", { lazyload: true, itemdata: aItemData });

                /*
                     Since this menu is built completely from script, call the "render" 
                     method passing in a node reference for the DOM element that the menu's 
                     root element should be appended to.
                */

                oMenuBar.render(document.body);


                var oPanel = new YAHOO.widget.Panel("exampleinfo", { constraintoviewport: true, fixedcenter: true, width: "400px", zIndex: 1});
                
                oPanel.setHeader("Application Menubar Example");
                oPanel.setBody("This example demonstrates how to create an application-like menu bar using JavaScript.");

                oPanel.render(document.body);

            };


            // Add a "load" handler for the window

            YAHOO.util.Event.onDOMReady(YAHOO.example.onDOMReady);

        </script>

    </head>
    <body class="yui-skin-sam">
    </body>
</html>